<template>
  <div class="h-87">
    <!-- 高 636px  -->
    <div class="flex justify-between" style="height:48.29%">
      <div data-bottom class="second-sides">
        <page-header text="农业机械总动力" :ph="330" ref="nyjxzdl">
          <v-chart :options="optionNYJXZDL" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="农村水电建设及发电量" :ph="330">
          <v-chart :options="category" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="农村居民家庭平均每百万拥有主要生产性固定资产数量" :ph="330">
          <v-chart :options="option" ref="xxxxx" />
        </page-header>
      </div>
    </div>
    <!-- 高 20px -->
    <div style="height:2.14%" />
    <!-- 高 607px -->
    <div class="flex justify-between" style="height:48.29%">
      <div data-bottom class="second-sides">
        <page-header text="灌溉水库和除涝治水情况" :ph="330" ref="ggskhclzsqk">
          <v-chart :options="GGSKHCLZSQK" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="农用农资使用量" :ph="330">
          <v-chart v-if="NYNZSYL.isShow" :options="NYNZSYL" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="有效灌溉面积及农用化肥施用量" :ph="330" ref="yxggmjjnyhfsyl">
          <v-chart :options="options" />
        </page-header>
      </div>
    </div>
    <Particulars />
  </div>
</template>

<script>
import PageHeader from 'header/PageHeader.vue'
import YlCharts from '@/components/Charts/ylCharts.vue'
import Particulars from 'header/particulars.vue'
import { getTowSideStatAndRadar, getTowSideStat } from '@/api/connector'
import { getHandle } from '@/api'
const tooltip = function(a, b) {
  return {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
    formatter: function(params, ticket, callback) {
      var htmlStr = ''
      for (var i = 0; i < params.length; i++) {
        var param = params[i]
        var xName = param.name // x轴的名称
        var seriesName = param.seriesName // 图例名称
        var value = param.value // y轴值
        var color = param.color // 图例颜色
        if (i === 0) {
          htmlStr += xName + '<br/>' // x轴的名称
        }
        htmlStr += '<div>'
        htmlStr +=
          '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' //一个点
        htmlStr += seriesName + '：' + value + (i === 0 ? a : b) // 圆点后面显示的文本
        htmlStr += '</div>'
      }
      return htmlStr
    }
  }
}
export default {
  name: 'ProductivityLevel',
  // eslint-disable-next-line vue/no-unused-components
  components: { YlCharts, PageHeader, Particulars },
  data() {
    return {
      menuLevel: 1,
      // 农业机械总动力
      optionNYJXZDL: {
        tooltip: {
          trigger: 'axis',
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' // 一个点
              htmlStr += seriesName + '：' + value + '万千瓦' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {
          // icon: 'diamond',
          itemGap: 13,
          data: [],
          top: '3%',
          left: 'center',
          textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
          }
        },
        grid: {
          bottom: '10%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisPointer: {
            show: true,
            lineStyle: {
              // color:"#DD001B",
              type: 'dashed'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: []
        },
        yAxis: [
          {
            name: '万千瓦',
            type: 'value',
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.1)'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 10,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(93,227,225,1)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(93,227,225,0)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            data: []
          },
          {
            name: '',
            type: 'line',
            smooth: true,
            lineStyle: {
              normal: {
                width: 1,
                color: 'rgb(45,175,255)'
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(45,175,255)'
              }
            },
            symbol: 'circle',
            symbolSize: 10,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(45,175,255,1)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(45,175,255,0)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            data: []
          }
        ]
      },
      // 农村水电建设及发电量
      category: {
        tooltip: {
          show: true,
          renderMode: 'html'
        },
        legend: {
          data: [],
          top: 'bottom',
          textStyle: {
            color: '#fff'
          }
        },
        radar: [
          {
            indicator: [
              // {
              //   text: '农村水电建设本年完成投资额'
              // },
              // {
              //   text: '农村发电设备容量 '
              // },
              // {
              //   text: '农村发电量'
              // }
            ],
            center: ['50%', '50%'],
            radius: 120,
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            name: {
              formatter: '{value}',
              textStyle: {
                color: '#FFF'
              }
            },
            splitArea: {
              areaStyle: {
                color: ['#0E2A43', '#0E2A43', '#0E2A43', '#0E2A43', '#0E2A43'],
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                shadowBlur: 10
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
              }
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'radar',
            itemStyle: {
              emphasis: {
                lineStyle: {
                  width: 4
                }
              }
            },
            data: [
              {
                value: [],
                // name: '长沙',
                symbol: 'rect',
                symbolSize: 5,
                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      fontSize: 12,
                      color: 'fff'
                    },
                    formatter: function(params) {
                      return params.value
                      // if (params.seriesName.indexOf('投资额') != -1) {
                      //   return params.value +" 万元";
                      // } else {
                      //   return params.value +" kW·h";
                      // }
                    }
                  }
                },
                areaStyle: {
                  normal: {
                    color: 'rgba(255, 255, 255, 0.5)'
                  }
                },
                lineStyle: {
                  normal: {
                    type: 'solid',
                    width: 4
                  }
                }
              }
            ]
          }
        ]
      },
      option: {},
      options: {
        isShow: false,
        tooltip: tooltip('万吨', '千公顷'),
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['最新成交价', '预购队列']
        },
        xAxis: {
          type: 'category',
          data: ['2019', '2018'],
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          }
        },
        yAxis: [
          {
            name: '万吨',
            position: 'right',
            nameTextStyle: {
              align: 'left'
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            }
          },
          {
            name: '千公顷',
            position: 'left',
            nameTextStyle: {
              align: 'left'
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            }
          }
        ],
        grid: {
          left: '7%',
          right: '7%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: ' 交易总额',
            type: 'bar',
            barMaxWidth: 30,
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: [6, 7, 8, 16]
          },
          {
            name: '农户覆盖率',
            type: 'line',
            data: [6, 7, 8, 15, 25]
          }
        ]
      },
      // 灌溉书库和除涝治水情况
      GGSKHCLZSQK: {},
      // 农用农资使用量
      NYNZSYL: {
        isShow: true,
        tooltip: {
          formatter: '{a} <br/>{b}: {c}公斤',
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: [
          {
            show: false,
            left: '9%',
            top: 0,
            bottom: 0,
            containLabel: true,
            width: '31%'
          },
          {
            tooltip: { show: false },
            show: false,
            left: '51%',
            top: 0,
            bottom: 0
          },
          {
            show: false,
            right: '9%',
            top: 0,
            bottom: 0,
            containLabel: true,
            width: '31%'
          }
        ],
        xAxis: [
          {
            type: 'value',
            inverse: true,
            axisLabel: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          {
            gridIndex: 1,
            show: false
          },
          {
            gridIndex: 2,
            type: 'value',

            axisLabel: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            inverse: true,
            position: 'right',
            data: [],
            axisLabel: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          {
            gridIndex: 1,
            type: 'category',
            inverse: true,
            data: [],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              align: 'center'
            }
          },
          {
            gridIndex: 2,
            type: 'category',
            inverse: true,
            position: 'left',
            data: [],
            axisLabel: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '2019年',
            type: 'bar',
            barWidth: 12,
            label: {
              show: true,
              position: 'left'
            },
            data: [10, 52, 200, 334, 390, 330, 220]
          },
          {
            xAxisIndex: 2,
            yAxisIndex: 2,
            name: '2018年',
            type: 'bar',
            barWidth: 12,
            label: {
              show: true,
              position: 'right'
            },
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      // 农村居民家庭平均每百万拥有主要生产性固定资产数量
      getHandle('/cybd/api/agri/agristatis/queryStat').then((data) => {
        const val = data.body
        var typeInfoSet = val.typeInfoSet
        var countySet = val.countySet
        var countyObj = new Array()
        for (var i = 0; i < countySet.length; i++) {
          var obj = {
            name: countySet[i],
            type: 'bar'
          }
          countyObj.push(obj)
        }
        var obj = {
          name: '对比',
          type: 'radar'
        }
        countyObj.push(obj)
        var dateSet = val.dateSet
        var typeSet = val.typeSet.map((item) => (item.length > 5 ? item.slice(0, 3) + '...' : item))
        var dataList = val.agriStatVOS
        var opS = new Array()

        for (var j = 0; j < dataList.length; j++) {
          var series = new Array()
          var ssA = new Array()
          //
          for (var k = 0; k < dataList[j].dataList.length; k++) {
            var sObj = {
              data: dataList[j].dataList[k].countyTypeValueList
            }
            series.push(sObj)
            var ssAObj = {
              name: dataList[j].dataList[k].countyName,
              value: dataList[j].dataList[k].countyTypeValueList
            }
            ssA.push(ssAObj)
          }
          var sObj = {
            data: ssA
          }
          series.push(sObj)
          var opsObj = {
            series: series
          }
          opS.push(opsObj)
        }
        this.option = {
          baseOption: {
            textStyle: {
              color: '#fff'
            },
            timeline: {
              // y: 0,
              axisType: 'category',
              // realtime: false,
              // loop: false,
              autoPlay: true,
              // currentIndex: 2,
              playInterval: 4000,
              // controlStyle: {
              //     position: 'left'
              // },
              data: dateSet,
              label: {
                formatter: function(s) {
                  return new Date(s).getFullYear()
                }
              }
            },
            tooltip: {},
            legend: {
              orient: 'vertical',
              x: 'right',
              data: countySet,
              textStyle: {
                color: '#fff'
              }
            },
            calculable: true,
            grid: {
              top: '48%',
              right: 1,
              left: '4.5%',
              bottom: '24%'
            },
            xAxis: [
              {
                type: 'category',
                axisLabel: {
                  interval: 0
                },
                data: typeSet,
                splitLine: {
                  show: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '台/万人'
              }
            ],
            polar: [
              {
                indicator: typeInfoSet,
                center: ['50%', '24%'],
                radius: 50,
                name: {
                  color: '#fff'
                }
              }
            ],
            calculable: true,
            series: countyObj
          },
          options: opS
        }
      })

      // 农业机械总动力
      getTowSideStat({
        groupCode: 'NYJXZDL'
      }).then((res) => {
        this.optionNYJXZDL.legend.data = res.body.typeSet
        var typeValueListMap = res.body.typeValueListMap
        var color = ['#3BB4FF', '#6647FF', '#19C4A1', '#CEB711', '#D69114', '#1C6DCC', '#11A0BB', '#11BB82', '#B325C8', '#D3485F']
        const colorArr = [
          { start: 'RGB(59,180,255,1)', end: 'RGB(59,180,255,0.3)' },
          { start: 'RGB(102,71,255,1)', end: 'RGB(102,71,255,0.3)' },
          { start: 'RGB(25,196,161,1)', end: 'RGB(25,196,161,0.3)' }
        ]
        var valArrKey = []
        var valArrval = []
        for (var key in typeValueListMap) {
          valArrKey.push(key)
          valArrval.push(typeValueListMap[key])
        }
        this.optionNYJXZDL.xAxis.data = res.body.dateSet
        this.optionNYJXZDL.series = valArrval.map((item, index) => {
          return {
            name: valArrKey[index],
            data: valArrval[index],
            type: 'line',
            smooth: true,
            lineStyle: {
              normal: {
                width: 1,
                color: color[index]
              }
            },
            itemStyle: {
              normal: {
                color: color[index]
              }
            },
            symbol: 'circle',
            symbolSize: 10,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: colorArr[index].start // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: colorArr[index].end // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        })
      })
      // 农村水电建设及发电量 this.category = {}category
      getTowSideStatAndRadar({
        groupCode: 'NCSDJSJFDL'
      }).then((res) => {
        this.category.legend.data = res.body.typeSet
        for (var i = 0; i < res.body.typeInfoSet.length; i++) {
          if (res.body.typeInfoSet[i].name.indexOf('投资额') !== -1) {
            res.body.typeInfoSet[i].name += ' (万元)'
            res.body.typeInfoSet[i].max = 40000
          } else {
            res.body.typeInfoSet[i].name += ' (kW·h)'
            res.body.typeInfoSet[i].max = 40000
          }
        }
        this.category.radar[0].indicator = res.body.typeInfoSet
        this.category.series[0].data[0].value = [res.body.typeInfoSet[0].maxValue, res.body.typeInfoSet[1].maxValue, res.body.typeInfoSet[2].maxValue]
      })

      // 农用农资使用量
      getTowSideStat({
        groupCode: 'CYNZPZ'
      }).then((res) => {
        var typeValueListMap = res.body.typeValueListMap
        var dateValueListMap = res.body.dateValueListMap
        var valArrKey = []
        var valArrval = []
        for (var key in typeValueListMap) {
          if (key.length < 6) {
            valArrKey.push(key + '  ')
          } else {
            valArrKey.push(key)
          }
          valArrval.push(typeValueListMap[key])
        }
        valArrKey.pop()
        dateValueListMap['2019'].pop()
        dateValueListMap['2018'].pop()
        this.NYNZSYL.yAxis[0].data = valArrKey
        this.NYNZSYL.yAxis[1].data = valArrKey
        this.NYNZSYL.yAxis[2].data = valArrKey
        this.NYNZSYL.series[0].data = dateValueListMap['2019']
        this.NYNZSYL.series[1].data = dateValueListMap['2018']
        this.NYNZSYL.isShow = true
      })

      // 有效灌溉面积及农用化肥施用量
      getTowSideStat({
        groupCode: 'YXGGMJJNYHFSYL'
      }).then((data) => {
        const val = data.body
        const options = this.options
        options.xAxis.data = val.dateSet
        this.options.legend.data = data.body.typeSet
        var typeValueListMap = data.body.typeValueListMap
        var valArrKey = []
        var valArrval = []
        for (var key in typeValueListMap) {
          valArrKey.push(key)
          valArrval.push(typeValueListMap[key])
          // console.log(typeValueListMap[key])
        }
        this.options.series = valArrval.map((item, index) => {
          return {
            name: valArrKey[index],
            data: valArrval[index],
            type: index === 0 ? 'bar' : 'line',
            yAxisIndex: index
          }
        })
        options.isShow = true
      })

      // 灌溉水库和除涝治水情况
      // 数据
      var radarDataAvg = []
      var maxData = 20
      // 颜色设置
      var color = {
        linearYtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#f5b44d'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        linearGtoB: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#43dfa2'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        linearBtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#1c98e8'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        areaBtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(35,184,210,.2)'
            },
            {
              offset: 1,
              color: 'rgba(35,184,210,0)'
            }
          ]
        }
      }
      this.GGSKHCLZSQK = {
        tooltip: {
          trigger: 'item'
        },
        radar: {
          center: ['60%', '30%'],
          radius: '40%',
          name: {
            color: '#fff'
          },
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              color: color.linearYtoG,
              opacity: 0.6
            }
          },
          splitLine: {
            lineStyle: {
              color: color.linearYtoG,
              opacity: 0.6
            }
          },
          splitArea: {
            areaStyle: {
              color: '#fff',
              opacity: 0.1,
              shadowBlur: 25,
              shadowColor: '#000',
              shadowOffsetX: 0,
              shadowOffsetY: 5
            }
          },
          indicator: []
        },
        grid: {
          left: 90,
          right: 80,
          bottom: 40,
          top: '60%'
        },
        xAxis: {
          type: 'category',
          position: 'bottom',
          axisLabel: {
            fontSize: 12
          },
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: []
        },
        yAxis: {
          name: '千公顷',
          nameLocation: 'end',
          nameGap: 24,
          nameTextStyle: {
            fontSize: 14
          },
          // max: maxData,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1
            }
          },
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          }
        },
        series: [
          {
            name: '灌溉水库和除涝治水情况',
            type: 'radar',
            symbolSize: 0,
            data: [
              {
                value: radarDataAvg[0],
                // name: '平均指标',
                itemStyle: {
                  normal: {
                    color: '#f8d351'
                  }
                },
                lineStyle: {
                  normal: {
                    opacity: 0
                  }
                },
                areaStyle: {
                  normal: {
                    color: '#f8d351',
                    shadowBlur: 25,
                    shadowColor: 'rgba(248,211,81,.3)',
                    shadowOffsetX: 0,
                    shadowOffsetY: -10,
                    opacity: 1
                  }
                }
              }
              // {
              //   value: radarData[6],
              //   name: '我的指标',
              //   itemStyle: {
              //     normal: {
              //       color: '#43dfa2'
              //     }
              //   },
              //   lineStyle: {
              //     normal: {
              //       opacity: 0
              //     }
              //   },
              //   areaStyle: {
              //     normal: {
              //       color: color.linearGtoB,
              //       shadowBlur: 15,
              //       shadowColor: 'rgba(0,0,0,.2)',
              //       shadowOffsetX: 0,
              //       shadowOffsetY: 5,
              //       opacity: 0.8
              //     }
              //   }
              // }
            ]
          },
          {
            // name: '',
            type: 'line',
            smooth: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#fff'
              }
            },
            lineStyle: {
              normal: {
                color: color.linearBtoG,
                width: 3
              }
            },
            areaStyle: {
              normal: {
                color: color.areaBtoG
              }
            },
            data: [],
            lineSmooth: true,
            markLine: {
              silent: true,
              data: [
                {
                  type: 'average',
                  name: '平均值'
                }
              ],
              precision: 0,
              label: {
                normal: {
                  formatter: '平均值: \n {c}'
                }
              },
              lineStyle: {
                normal: {
                  color: 'rgba(248,211,81,.7)'
                }
              }
            },
            tooltip: {
              // trigger: 'axis',
              position: 'top',
              // formatter: '{c} 千公顷',
              formatter: function(params) {
                var result = ''
                return (result = params.marker + params.name + ' : ' + params.value + ' 千公顷</br>')
              },
              backgroundColor: 'rgba(28,152,232,.2)',
              padding: 6
            }
          }
        ]
      }
      getTowSideStatAndRadar({
        groupCode: 'GGSKHCLZSQK'
      }).then((res) => {
        //console.log(res)
        this.GGSKHCLZSQK.xAxis.data = res.body.dateSet
        this.GGSKHCLZSQK.series[0].data[0].value = res.body.dateTypeDataList[0]
        this.GGSKHCLZSQK.series[1].data = res.body.lineDataList
        // this.GGSKHCLZSQK.radar.indicator = res.body.typeInfoSet
        for (var i = 0; i < res.body.typeInfoSet.length; i++) {
          // if (res.body.typeInfoSet[i].name.indexOf('比重') != -1) {
          //   res.body.typeInfoSet[i].name += ' (%)'
          // } else {
          //   res.body.typeInfoSet[i].name += ' (公斤)'
          // }
          res.body.typeInfoSet[i].name += ' (千公顷)'
        }
        this.GGSKHCLZSQK.radar.indicator = res.body.typeInfoSet
      })
    }
  }
}
</script>
<style scoped>
.second-center {
  width: 47.87%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-sides {
  width: 32.7%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-center[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-center[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-sides[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-sides[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
</style>
